<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="index.css">
  <script>
    document.onclick = function(e) { // shows click coordinates
      coords.innerHTML = e.clientX + ':' + e.clientY;
    };
  </script>
</head>

<body>

  Click anywhere to get window coordinates.
  <br> That's for testing, to check the result you get by JavaScript.
  <br>
  <div id="coords">(click coordinates show up here)</div>


  <div id="field">
    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  </div>


  <div class="triangle-right" style="left:-20px;top:-176px">1</div>
  <div class="triangle-right" style="left:-10px;top:-178px">3</div>
  <div class="triangle-right" style="left:190px;top:-40px">4</div>
  <div class="triangle-right" style="left:200px;top:-42px">2</div>


  <script>
    // ...your code...
  </script>

</body>
</html>
